<template>
	<view>
		<u-sticky>
			<u-tabs :list="tabs" :scrollable="false" :current="index" bgColor="#00ffff"></u-tabs>
		</u-sticky>
		<!-- 宫格布局 -->
		<view  class="position-grid">
			<!-- 热门岗位 -->
			<view class="position-title">
				<image src="/static/hot.png"></image>
				<text>热门岗位</text>
			</view>
			<u-grid :border="false" :col="2">	
				<u-grid-item v-for="position in positions">
					<view class="position">
						<text class="grid-text"  @click="handleRecord(position.id)">{{position.name}}</text>
					</view>
				</u-grid-item>
				
			</u-grid>
		</view>
		<!-- <view class="position-view">
			<view class="position">
				java
			</view>
			<view class="position">
				前端
			</view>
			<view class="position">
				鸿蒙
			</view>
			<view class="position">
				人工智能
			</view>

		</view> -->
	</view>
</template>

<script>
	import { listAll,getQuestion } from '@/api/interview/position';
	export default {
		data() {
			return {
				//选中的tab的索引
				index: 0,
				tabs: [{
					name: '模拟面试',
				}, {
					name: '面试报告',
				}],
				positions:[]
			};
		},
		onLoad() {
			this.getPositions()
		},
		methods:{
			//加载岗位信息
			getPositions(){
				listAll().then(res=>{
					console.log(res)
					this.positions=res.data
				})
			},
			handleRecord(positionId){
				 uni.showLoading({
				          title: '准备面试中...'
				        });
				//调用  生成一次面试记录
				getQuestion(positionId).then(res=>{
					console.log(res)
					//缓存面试记录
					uni.setStorageSync("interviewRecord",res.data)
					uni.hideLoading()
						//跳转到面试页面
					uni.navigateTo({
						url:'/pages/answer/answer'
					})	
				})
			
			}
		}
		
	}
</script>

<style lang="scss">
	

		.position {
			border: 1rpx solid #000;
			width: 300rpx;
			height: 220rpx;
			text-align: center;
			line-height: 150rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
		}
	
	
	 .grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
	.position-grid{
		padding-top: 50rpx;
	}
	.position-title{
		display: flex;
		align-items: center;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>